<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>杭州美卓-多功能局放仪 /超声波成像仪 /局放在线监测 /SF6气体监测方案生产商</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/js_z.js"></script>
    <link rel="stylesheet" type="text/css" href="css/thems.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?c9d08b45c38995ade27133094e176186";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script></head>

<body>
  <!--头部-->
  <div class="r_top">
    <span>免费咨询电话：<b>0571-85159673
            / 13575788882</b></span>

</div>
<div class="head clearfix">
    <div class="logo"><a href="index.html"><img src="img/logo.jpeg" alt="杭州美卓自动化有限公司"></a></div>
    <div class="head_r">

        <div class="nav_m">
            <div class="n_icon">导航栏</div>
            <ul class="nav clearfix">
                <li><a href="index.html">网站首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li class="now"><a href="product.html">产品系列</a></li>
                <li><a href="service.html">解决方案</a></li>
                <li><a href="news.html">公司动态</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>
    <!--头部-->
    <!--幻灯片-->
    <div class="banner banner_s"><img src="img/banner_a.jpeg" alt=""></div>
    <!--幻灯片-->
    <div class="scd clearfix">
        <div class="scd_l">
            <div class="name"><img src="img/sn1.png" width="139" height="47" alt=""></div>
            <ul class="s_nav clearfix" id="productType">
                <!-- <li class="now">
                    <a href="#"><span>奥德斯机器人</span></a>
                </li>
                <li>
                    <a href="#"><span>涂装线</span></a>
                </li> -->
            </ul>
        </div>
        <div class="scd_r">
            <div class="r_title" id="r_title">
                工业机器人<span>/<em>Industrial robot</em></span>
            </div>
            <div class="scd_m">
                <ul class="pro clearfix" id="productList">
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                    <li>
                        <img src="img/pic7.jpeg" alt="">
                        <div class="des">
                            <p>IRB 2400 with force control</p>
                            <a href="#">+ 查看详情</a>
                        </div>
                    </li>
                </ul>
                <div class="space_hx">&nbsp;</div>
                <div class="pages">
                    <a href="#" class="bg" id="preBefore" onclick="preBefore()">上一页</a>
                    <div id="pagination" style="display: inline-block">
                        <a href="#" class="now">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#">……</a>
                    </div>

                    <a href="javascript:void()" class="bg" onclick="preNext()">下一页</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚占位符 -->
    <div id="footer-placeholder"></div>
    <script>

        $.ajax({
            type: "POST",
            url: "https://www.mzpower.com/api/contentType/byCategory",
            data: {
                category: 'product'
            },
            dataType: "json",
            crossDomain: true,
            success: function (data) {
                $('#productType').empty();   //清空resText里面的所有内容
                var html = '';
                // 新接口直接返回数组，不需要 data.list
                $.each(data, function (commentIndex, comment) {
                    html += `
                    <li style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" data-type=${comment.id}>
            	        <a href="#"><span >${comment.name}</span></a>
                    </li>`
                });
                $('#productType').html(html);
                initProduct()
                $('#productType li').click(function () {
                    $('#productType li').removeClass('now')
                    $(this).addClass('now')
                    $('#r_title').text($(this).text())
                    console.log($(this).data('type'));
                    getProductByType($(this).data('type'))
                })
            }
        })

        function initProduct() {
            $('#r_title').text('物联网智能传感器')
            getProductByType(1)
            $('#productType li')[0].setAttribute("class", "now");
        }

        function getProductByType(value, page) {
            $.ajax({
                type: "POST",
                url: "https://www.mzpower.com/api/product/list",
                data: {
                    page: page ? page : 1,
                    pageSize: 9,
                    type: value
                },
                dataType: "json",
                crossDomain: true,
                success: function (data) {
                    $('#productList').empty();   //清空resText里面的所有内容
                    var html = '';
                    $.each(data.list, function (commentIndex, comment) {
                        html += `
                    <li>
                        <img src=${comment.imageUrl} alt="">
                        <div class="des">
                            <p>${comment.name}</p>
                            <a href="#" onclick="goDetail(${comment.id})">+ 查看详情</a>
                        </div>
                    </li>`
                    });
                    $('#productList').html(html);
                    $('#productType li').click(function () {

                    })

                    //分页
                    setPageNation(data)
             
                }
            })
        }

        function goDetail(id) {
            window.open(`/productDetail.html?id=${id}`)
        }
        //分页具体实现
        let paginationData = {}
        function setPageNation(data) {
            const { page, pageSize, total } = data
            paginationData = {
                page: page,
                pageSize: pageSize,
                total: total
            }
            let pageCount = parseInt(total / pageSize)
            $('#pagination').empty();
            let html = ''
            for (let i = 0; i < pageCount + 1; i++) {
                html += `<a href="javascript:void;" data-index=${i + 1}>${i + 1}</a>`
            }
            $('#pagination').html(html);
            $('#pagination a')[page - 1].setAttribute("class", "now");
            $('#pagination a').click(function () {
                $('#pagination a').removeClass('now')
                $(this).addClass('now')
                getProductByType($('#productType li.now').data('type'), $(this).data('index'))
            })
        }
               //上一页事件
               function preBefore() {
            let maxNum = parseInt(paginationData.total / paginationData.pageSize)
            let page =  $('#pagination a.now').data('index')
            page--;
            if(page<1){
                page = 1
            }
            getProductByType($('#productType li.now').data('type'),page)
        }
                    //下一页事件
                
        function preNext() {
            let maxNum = parseInt(paginationData.total / paginationData.pageSize)
            let page =  $('#pagination a.now').data('index')
            page++;
            if(page>4){
                page = 4
            }
            getProductByType($('#productType li.now').data('type'),page)
        }
    </script>
    <!-- 加载页脚组件 -->
    <script>
        $.get('includes/footer-component.html', function(data) {
            $('#footer-placeholder').html(data);
        }).fail(function() {
            console.warn('无法加载页脚组件');
        });
    </script>

    <!-- 统计代码 -->
    <script async src="https://0199a2af-6c56-7918-afd6-e4d71e273363.spst2.com/ustat.js"></script>
        
</body>

</html>